<template>
    <div>
        <div class="banner"
             @click="handleBannerClick"
        >
            <img :src="bannerImg" class="banner-img">
            <div class="banner-info">
                <div class="banner-title">
                    {{sightName}}
                </div>
                <div class="banner-num">
                    <i class="el-icon-picture"></i>
                    {{galleryNum}}
                </div>
            </div>

        </div>
        <fade-animation>
          <common-gallery :imgs="gallaryImgs"
                          v-show="showGallery"
                          @close="handleGalleryClick"
          />
        </fade-animation>
    </div>
</template>

<script>
import CommonGallery from '@/common/gallery/Gallery.vue'
import FadeAnimation from '@/common/fadeAnimation/FadeAnimation'
export default {
  components: {
    CommonGallery,
    FadeAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      showGallery: false
    }
  },
  computed: {
    galleryNum () {
      return this.gallaryImgs.length
    }
  },
  methods: {
    handleBannerClick () {
      this.showGallery = true
    },
    handleGalleryClick () {
      this.showGallery = false
    }
  }
}
</script>

<style scoped lang='stylus'>
    .banner {
        position : relative
        overflow : hidden
        height : 0
        padding-bottom : 55%
        .banner-img {
            width : 100%
        }
        .banner-info {
            display : flex
            position : absolute
            left : 0
            right : 0
            bottom : 0rem
            line-height : 0.6rem
            color : #fff
            align-items : center
            background-image : linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
            .banner-title {
                flex : 1
                font-size : 0.32rem
                padding : 0 0.2rem
            }
            .banner-num {
                padding : 0 0.4rem
                line-height : 0.32rem
                height : 0.32rem
                border-radius : 0.2rem
                background : rgba(0, 0, 0, 0.8)
                font-size : 0.24rem
            }
        }
    }
</style>
